<template>
  <div>
    <el-container>
      <el-header>&nbsp;人力资源管理系统</el-header>
      <el-container class="container">
        <el-aside width="300px">
          <Menu>

          </Menu>
        </el-aside>
        <el-container>
          <el-main
              ref="employeeQueryFile"
              :model="employeeQueryFile"
              :rules="employeeQuery"
          >
            <el-row>
              <el-col :span="24">
                <div class="grid-content bg-purple-dark">
                  <span>
                    人力资源档案查询
                  </span>
                </div>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <div class="grid-content">

                </div></el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <div class="grid-content">

                </div>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <div class="grid-content">

                </div>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="7">
                <div class="grid-content">

                </div>
              </el-col>
              <el-col :span="3">
                <div class="grid-content bg-purple">
                <span>
                  I级机构
                </span>
                </div>
              </el-col>
              <el-col :span="7">
                <div class="grid-content bg-purple-light">
                  <el-select v-model="employeeQueryFile.forgId" placeholder="请选择" v-on:change="getSecondOrg()" style="width: 100%">
                    <el-option
                        v-for="item in employeeQuery.FirstOrganization"
                        :label="item.forgName"
                        :value="item.forgId"
                    >
                      {{item.forgName}}
                    </el-option>
                  </el-select>
                </div>
              </el-col>
              <el-col :span="7">
                <div class="grid-content">

                </div>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="7">
                <div class="grid-content">

                </div>
              </el-col>
              <el-col :span="3">
                <div class="grid-content bg-purple">
                  <span>
                  II级机构
                </span>
                </div>
              </el-col>
              <el-col :span="7">
                <div class="grid-content bg-purple-light">
                  <el-select v-model="employeeQueryFile.sorgId" placeholder="请选择" v-on:change="getThirdOrg" style="width: 100%">
                    <el-option
                        v-for="item in employeeQuery.SecondOrganization"
                        :label="item.sorgName"
                        :value="item.sorgId"
                    >
                      {{item.sorgName}}
                    </el-option>
                  </el-select>
                </div>
              </el-col>
              <el-col :span="7">
                <div class="grid-content">

                </div>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="7">
                <div class="grid-content">

                </div>
              </el-col>
              <el-col :span="3">
                <div class="grid-content bg-purple">
                  <span>
                  III级机构
                </span>
                </div>
              </el-col>
              <el-col :span="7">
                <div class="grid-content bg-purple-light">
                  <el-select v-model="employeeQueryFile.torgId" placeholder="请选择" style="width: 100%">
                    <el-option
                        v-for="item in employeeQuery.ThirdOrganization"
                        :label="item.torgName"
                        :value="item.torgId"
                    >
                      {{item.torgName}}
                    </el-option>
                  </el-select>
                </div>
              </el-col>
              <el-col :span="7">
                <div class="grid-content">

                </div>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="7">
                <div class="grid-content">

                </div>
              </el-col>
              <el-col :span="3">
                <div class="grid-content bg-purple">
                  <span>
                  职位分类
                </span>
                </div>
              </el-col>
              <el-col :span="7">
                <div class="grid-content bg-purple-light">
                  <el-select v-model="employeeQueryFile.cjobId" placeholder="请选择" v-on:change="getJobName" style="width: 100%">
                    <el-option
                        v-for="item in employeeQuery.JobClassification"
                        :label="item.cjobName"
                        :value="item.cjobId"
                    >
                    </el-option>
                  </el-select>
                </div>
              </el-col>
              <el-col :span="7">
                <div class="grid-content">

                </div>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="7">
                <div class="grid-content">

                </div>
              </el-col>
              <el-col :span="3">
                <div class="grid-content bg-purple">
                  <span>
                  职位名称
                </span>
                </div>
              </el-col>
              <el-col :span="7">
                <div class="grid-content bg-purple-light">
                  <el-select v-model="employeeQueryFile.njobId" placeholder="请选择" style="width: 100%">
                    <el-option
                        v-for="item in employeeQuery.JobName"
                        :label="item.njobName"
                        :value="item.njobId"
                    >
                    </el-option>
                  </el-select>
                </div>
              </el-col>
              <el-col :span="7">
                <div class="grid-content">

                </div>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="7">
                <div class="grid-content">

                </div>
              </el-col>
              <el-col :span="3">
                <div class="grid-content bg-purple">
                  <span>
                    建档时间
                  </span>
                </div>
              </el-col>
              <el-col :span="7">
                <div class="grid-content bg-purple-light">
                  <el-date-picker
                      v-model="employeeQueryFile.timeValue"
                      type="datetimerange"
                      :shortcuts="shortcuts"
                      format="YYYY-MM-DD"
                      value-format="YYYY-MM-DD"
                      range-separator="至"
                      start-placeholder="起始时间"
                      end-placeholder="结束时间"
                      style="width: 100%"
                  >
                  </el-date-picker>
                </div>
              </el-col>
              <el-col :span="7">
                <div class="grid-content">

                </div>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="11">
                <div class="grid-content">

                </div>
              </el-col>
              <el-col :span="2">
                <div class="grid-content">
                  <div class="grid-content">
                    <el-button type="success" round @click="QueryFile">查找</el-button>
                  </div>
                </div>
              </el-col>
              <el-col :span="11">
                <div class="grid-content">

                </div>
              </el-col>
            </el-row>
          </el-main>
        </el-container>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import{ defineComponent, ref }from 'vue'
import {
  Location,
  Document,
  Menu as IconMenu,
  Setting,
} from '@element-plus/icons-vue'
import Menu from "@/components/Menu";
export default defineComponent({
  name: "FileQuery",
  components: {
    Menu,
    Location,
    Document,
    Setting,
    IconMenu,
  },
  setup() {
    const activeNames = ref(['1'])
    const handleChange = (val) => {
      console.log(val)
    }
    const shortcuts = [
      {
        text: '7日内',
        value: () => {
          const end = new Date()
          const start = new Date()
          start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
          return [start, end]
        },
      },
      {
        text: '14日内',
        value: () => {
          const end = new Date()
          const start = new Date()
          start.setTime(start.getTime() - 3600 * 1000 * 24 * 14)
          return [start, end]
        },
      },
      {
        text: '30日内',
        value: () => {
          const end = new Date()
          const start = new Date()
          start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
          return [start, end]
        },
      },
      {
        text: '90日内',
        value: () => {
          const end = new Date()
          const start = new Date()
          start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
          return [start, end]
        },
      },
      {
        text: '180日内',
        value: () => {
          const end = new Date()
          const start = new Date()
          start.setTime(start.getTime() - 3600 * 1000 * 24 * 180)
          return [start, end]
        },
      },
      {
        text: '365日内',
        value: () => {
          const end = new Date()
          const start = new Date()
          start.setTime(start.getTime() - 3600 * 1000 * 24 * 365)
          return [start, end]
        },
      },
    ]
    return {
      activeNames,
      handleChange,
      shortcuts,
    }
  },
  data() {
    return {
      employeeQueryFile: {
        forgId: '请选择',
        sorgId: '请选择',
        torgId: '请选择',
        cjobId: '请选择',
        njobId: '请选择',
        timeValue: '',
        timeValueStart: '',
        timeValueEnd: '',
      },
      employeeQuery: {
        FirstOrganization: null,
        forgName: null,
        forgId: null,
        SecondOrganization: null,
        sorgName: null,
        sorgId: null,
        ThirdOrganization: null,
        torgName: null,
        torgId: null,
        JobClassification: null,
        cjobName: null,
        cjobId: null,
        JobName: null,
        njobName: null,
        njobId: null,
      }
    }
  },
  methods: {
    QueryFile(formName) {
      this.$router.push({
        name : "FileQueryList",
        query: {
          forgId: this.employeeQueryFile.forgId,
          sorgId: this.employeeQueryFile.sorgId,
          torgId: this.employeeQueryFile.torgId,
          cjobId: this.employeeQueryFile.cjobId,
          njobId: this.employeeQueryFile.njobId,
          timeValueStart: this.employeeQueryFile.timeValue[0],
          timeValueEnd: this.employeeQueryFile.timeValue[1],
        }
      })
    },
    getFirstOrg() {
      this.axios.get('/selectFirstOrg').then(res =>{
        const _this = this
        _this.employeeQuery.FirstOrganization = res.data.data
      })
    },
    getSecondOrg() {
      this.employeeQueryFile.sorgId = null
      this.employeeQueryFile.torgId = null
      this.axios.get('/selectSecondOrg/'+ this.employeeQueryFile.forgId).then(res =>{
        const _this = this
        _this.employeeQuery.SecondOrganization = res.data.data
      })
    },
    getThirdOrg() {
      this.employeeQueryFile.torgId = null
      this.axios.get('/selectThirdOrg/'+ this.employeeQueryFile.sorgId).then(res =>{
        const _this = this
        _this.employeeQuery.ThirdOrganization = res.data.data
      })
    },

    getJobClassification() {
      this.axios.get('/selectJobClassification').then(res =>{
        const _this = this
        _this.employeeQuery.JobClassification = res.data.data
      })
    },
    getJobName() {
      this.employeeQueryFile.njobId = null
      this.axios.get('/selectJobName/'+ this.employeeQueryFile.cjobId).then(res =>{
        const _this = this
        _this.employeeQuery.JobName = res.data.data
      })
    }
  },
  created() {
    this.getFirstOrg()
    this.getJobClassification()
  },
})

</script>

<style scoped>
.el-header{
  background-color: #409EFF;
  color: #e9eef3;
  text-align: left;
  line-height: 60px;
  font-size: 30px;
}
.el-aside {
  background-color: #d3dce6;
  color: var(--el-text-color-primary);
  text-align: center;
  /*line-height: 860px;*/
}

.el-main {
  background-color: #e9eef3;
  color: var(--el-text-color-primary);
  text-align: center;
  line-height: 30px;
}

body > .el-container {
  margin-bottom: 400px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}

.el-row {
  margin-bottom: 20px;
}

.el-row :last-child {
  margin-bottom: 0;
}

.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}

.high-row{
  min-height: 200px;
}

.container{
  min-height: 860px;
}

.line {
  width: 70%;
}

.line div {
  width: 100%;
  height: 0;
  border-top: 1px solid var(--el-border-color-base);
}

</style>